/*
 * @Author: yangrongxin
 * @Date: 2021-08-09 17:04:43
 * @LastEditors: guoju
 * @LastEditTime: 2022-01-07 11:26:23
 */
import { Component } from 'react';
import F2Canvas from '@/components/F2Component';

import { Chart } from '@antv/f2/lib/core';

import '@antv/f2/lib/animation/animate'; // 引入动画插件
import '@antv/f2/lib/geom/area';
import '@antv/f2/lib/geom/line';
import '@antv/f2/lib/geom/point';
import '@antv/f2/lib/coord/polar';
import '@antv/f2/lib/component/axis/circle';

import Tooltip from '@antv/f2/lib/plugin/tooltip';
import Legend from '@antv/f2/lib/plugin/legend';

export default class Radar extends Component<any, any> {
  onInit = (config) => {
    console.log('charConfig', config);

    const { chartData } = this.props;

    const data = [
      {
        item: '自我反思',
        user: '你的分数',
        score: 70,
      },
      {
        item: '自我反思',
        user: '参考值',
        score: 30,
      },
      {
        item: '外貌关注',
        user: '你的分数',
        score: 60,
      },
      {
        item: '外貌关注',
        user: '参考值',
        score: 70,
      },
      {
        item: '反馈调整',
        user: '你的分数',
        score: 50,
      },
      {
        item: '反馈调整',
        user: '参考值',
        score: 60,
      },
      {
        item: '印象管理',
        user: '你的分数',
        score: 40,
      },
      {
        item: '印象管理',
        user: '参考值',
        score: 50,
      },
    ];
    // 获取当前上层组件传入的数据 或者取本身的数据
    Chart.plugins.register([Tooltip, Legend]);
    const chart = new Chart(config);
    chart.coord('polar');

    // 获取绘图的最大值和最小值
    const maxCount =
      Math.max.apply(
        null,
        chartData.map((item: any) => item.score),
      ) || 100;
    const minCount =
      Math.min.apply(
        null,
        chartData.map((item: any) => item.score),
      ) || 0;

    const getRealVal = (val: number) => (Number.isFinite(Math.abs(val)) ? val : 0);

    const maxValue: number = getRealVal(maxCount);
    const minValue: number = getRealVal(minCount);

    console.log('chartData', chartData);
    console.log('maxValue', maxValue);
    console.log('minValue', minValue);

    chart.source(chartData.length !== 0 ? chartData : data, {
      score: {
        min: minValue,
        max: maxValue,
        nice: true,
        tickCount: 8,
      },
    });
    chart.legend('user', {
      position: 'top',
      align: 'center',
    });
    chart.tooltip({
      showCrosshairs: true,
      showItemMarker: false,
      onShow: function onShow(ev) {
        const { items } = ev;
        items[0].name = null;
        items[0].value = `$ ${items[0].value}`;
      },
    });
    chart.axis('score', {
      label: function label(text, index, total) {
        if (index === total - 1) {
          return null;
        }
        return {
          top: true,
        };
      },
      grid: {
        lineDash: null,
      },
      line: {
        top: false,
      },
    });
    chart
      .line() // area or line 控制当前展示的区域 是空心还是实心
      .position('item*score')
      .color('user')
      .style('user', {
        lineDash(val) {
          if (val === '参考值（最小）' || val === '参考值（最大）') {
            return [2, 2];
          }
          return null;
        },
      })
      .animate({
        appear: {
          animation: 'groupWaveIn',
        },
      });
    chart
      .area()
      .position('item*score')
      .color('user')
      .animate({
        appear: {
          animation: 'groupWaveIn',
        },
      });
    chart.render();
    return chart;
  };

  render() {
    return <F2Canvas onInit={this.onInit.bind(this)} />;
  }
}
